var curpage = 1;
var sliding = false;
var click = true;
var left = document.getElementById("left");
var right = document.getElementById("right");
var slide1 = document.getElementById("slide1");
var background = document.getElementById("background");
var pagePrefix = "slide";
var pageShift = 500;
var transitionPrefix = "circle";
var svg = true;
var imgList = [];
var point = 0;


function flush(direction) {
    if (direction) {
        // to the left side
        point = (point == 0) ? point: point - 1;
    } else{
        // to the right side
        point = (point == imgList.length) ? point: point + 1;
    }
    setBackgroundImg(slide1, imgList[point]);
    setBackgroundImg(background, imgList[point]);
}

function setBackgroundImg(node, img) {
    node.style.backgroundImage = 'url(' + img + ')';
}

function fillList(isAsync) {
    $.get({
        url: '/url/image',
        async: isAsync,
        success(data) {
            let jsonObj = JSON.parse(data.msg);
            if (jsonObj.code == 200) {
                imgList.push(jsonObj.imgurl);
            }
        }
    });
}

function leftSlide() {
    if (click) {
        console.log(curpage);
        if (curpage == 0) curpage = 1;
        sliding = true;
        curpage--;
        svg = true;
        click = false;
        slide1.className += " tran";
        setTimeout(() => {
            move();
        }, 200);
        setTimeout(() => {
            slide1.classList.remove("tran");
        }, 1400);
    }
}

function rightSlide() {
    if (click) {
        if (curpage == 2) curpage = 0;
        sliding = true;
        curpage++;
        svg = false;
        click = false;
        slide1.className += 'tran';
        slide1.className += " tran";
        setTimeout(() => {
            move();
        }, 200);
        setTimeout(() => {
            slide1.classList.remove("tran");
        }, 1400);
    }
}

function move() {
    if (sliding) {
        sliding = false;
        if (svg) {
            for (j = 1; j <= 9; j++) {
                let c = document.getElementById(transitionPrefix + j);
                c.classList.remove("steap");
                c.setAttribute("class", transitionPrefix + j + " streak");
            }
        } else {
            for (j = 10; j <= 18; j++) {
                let c = document.getElementById(transitionPrefix + j);
                c.classList.remove("steap");
                c.setAttribute("class", transitionPrefix + j + " streak");
            }
        }
        setTimeout(() => {
            sliding = true;
        }, 600);
        setTimeout(() => {
            click = true;
        }, 1700);

        setTimeout(() => {
            if (svg) {
                for (j = 1; j <= 9; j++) {
                    var c = document.getElementById(transitionPrefix + j);
                    c.classList.remove("streak");
                    c.setAttribute("class", transitionPrefix + j + " steap");
                }
            } else {
                for (j = 10; j <= 18; j++) {
                    let c = document.getElementById(transitionPrefix + j);
                    c.classList.remove("streak");
                    c.setAttribute("class", transitionPrefix + j + " steap");
                }
                sliding = true;
            }
        }, 850);
        setTimeout(() => {
            click = true;
        }, 1700);
    }
}

left.onmousedown = () => {
    flush(true);
    leftSlide();
};

right.onmousedown = () => {
    fillList(true);
    flush(false);
    rightSlide();
};


fillList(false);
fillList(true);
fillList(true);

window.onload = () => {
    setBackgroundImg(slide1, imgList[point]);
}

